<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo title="大牌优选" :isBackTitle="true"></topLogo>
			<view class="wrap">
				<view class="topss">
					<view class="left">
						<uni-search-bar placeholder="搜索" @confirm="search" v-model="word" cancelButton="none" class="sousuokuang">
						</uni-search-bar>
					</view>
					<view class="right">
						<uni-badge class="uni-badge-left-margin" :text="cartNum" absolute="rightTop" :offset="[5, 5]" size="small">
							<uni-icons type="cart" size="30" color="#fff" @click="$public.navto('cart')"></uni-icons>
						</uni-badge>

					</view>
				</view>

			</view>
			<view class="banner_div">
				<view class="wrap">
					<uni-swiper-dot class="uni-swiper-dot-box" :info="banner" mode="round" :current="current"
						:dots-styles="swiperData">
						<swiper class="swiper-box" :current="swiperDotIndex" @change="change" autoplay="auto">
							<swiper-item v-for="(item, index) in banner" :key="index"
								@click="item.url ? $public.navto(item.url) : ''">
								<image mode="scaleToFill" class="swiperimage" :src="$public.imgageUrl(item.images)"></image>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<view class="wrap ">
				<view class="material-column">
					<uni-grid :column="5" :show-border="false" :square="false">
						<uni-grid-item v-for="(item,index) in navList" :key="index">
							<view class="grid-item-box" @click="$public.navto('list',{columnId:item.columnId})">
								<view class="image-div">
									<image class="image" :src="$public.imgageUrl(item.image)" mode="aspectFit" />
								</view>
								<view class="text">{{item.title}}</view>
							</view>
						</uni-grid-item>

					</uni-grid>
				</view>
			</view>
			<view class="wrap ">
				<view class="tejialiangtu">
					<view class="left tjdiv" @click="tejiaData.url ? $public.navto(tejiaData.url) : ''">
						<image :src="$public.imgageUrl(tejiaData.images)" mode="scaleToFill" class="image"></image>
						<!-- {{tejiaData.title}} -->
					</view>
					<view class="right tjdiv" @click="zhengdianData.url ? $public.navto(zhengdianData.url) : ''">
						<image :src=" $public.imgageUrl(zhengdianData.images)" mode="scaleToFill" class="image">
						</image>
						<!-- {{zhengdianData.title}} -->
					</view>
				</view>
			</view>
			<view class="wrap">
				<view class="cygn-div">
					<jxwTitle title="推荐商品" :showMore="true" url="list"></jxwTitle>
					<view class="jrjg-div">
						<view class="jrjg-list" v-for="(item,index) in productList" :key="index" v-if="index<6"
							@click="$public.navto('detail',{productId:item.productId})">
							<image :src="$public.imgageUrl(item.smallImage)" mode="scaleToFill" class="image">
							</image>
							<view class="title1">
								{{item.title}}
							</view>
							<view class="title2">
								<text class="redzi">￥{{item.money}}</text>
								<text style="text-decoration: line-through;margin-left: 15rpx;">￥{{item.marketPrice}}</text>
							</view>
							<view class="title3">
								已售 <text style="color: #333;">{{item.exchangeNum}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				swiperData: {
					selectedBackgroundColor: "#1ca7ec",
					selectedBorder: "#1ca7ec",
					backgroundColor: "#d3d3d3",
					border: "#d3d3d3",
				},
				swiperDotIndex: 0,
				current: 0,
				navList: [],
				productList: [],
				word: "",
				tejiaData: {},
				zhengdianData: {},
				cartNum: ""
			};
		},
		onLoad() {
			this.getBanner();
			this.getMallColumn()
			this.getProductList()
			this.getArticle30()
			this.getArticle31()

		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
			this.getCartList()
		},
		methods: {
			search() {
				console.log("this.word", this.word)
				// this.word = value
				this.$public.navto("list", {
					word: this.word
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			getMallColumn() {
				this.$public.htmlPost("/api/getMallColumn", {
					parentId: 4
				}).then((res) => {
					console.log("getMallColumn res", res)
					let data = res.data;
					if (data.code == 0) {
						this.navList = this.$_.filter(data.data, function(o) {
							return o.parentId == 4;
						})
					}
				})
			},
			getArticle30() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 30,
					tj: ""
				}).then((res) => {
					console.log("getArticle30 res", res)
					let data = res.data;
					if (data.code == 0) {
						that.tejiaData = data.data[0]
					}
				})
			},
			getArticle31() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 31,
					tj: ""
				}).then((res) => {
					console.log("getArticle31 res", res)
					let data = res.data;
					if (data.code == 0) {
						that.zhengdianData = data.data[0]
					}
					uni.hideLoading();
				})
			},
			getCartList() {
				let that = this
				this.$public.htmlPost("/api/getCartList").then((res) => {
					console.log("getCartList res", res)
					let data = res.data;
					if (data.code == 0) {
						that.cartNum = data.data.length
					}
				})
			},
			getBanner() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 28,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
					uni.hideLoading();
				})
			},
			getProductList() {
				let params = {
					orderByColumn: "createTime",
					isAsc: "desc",
					typeId: 4
				}
				this.$public.htmlPost("/api/getProductList", params).then((res) => {
					console.log("getProductList res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							let json = JSON.parse(item.referenceMoney)
							item.marketPrice = json.market_price
							item.money = json.money
							if (item.isBest == 1)
								this.productList.push(item)
						})
					}
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		background: url(#{$imageUrl}/webbg.png) center -200rpx no-repeat;
		background-size: 100% auto;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.topss {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 650rpx;
			}

			.right {}
		}

		.banner_div {
			margin: 30rpx 0;

			.swiper-box {
				height: 344rpx;
			}

			.swiperimage {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				// overflow: hidden;
			}

			.videocss {
				width: 100%;
				height: 385rpx;
			}
		}

		.material-column {
			.image-div {

				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 40rpx auto 10rpx;
				// overflow: hidden;

				.image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}
			}

			.text {
				text-align: center;
				width: 115rpx;
				color: #666666;
				margin: 0 auto;
				// line-height: 2;
				font-size: 28rpx;
			}
		}

		.tejialiangtu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 0;

			.tjdiv {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 330rpx;
				height: 200rpx;
				position: relative;
				color: #fff;
				font-size: 32rpx;

				&.right {
					color: #FC453F;
					text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
					/* 描边效果，可以根据需求调整阴影的偏移和颜色 */
					// -webkit-text-stroke: 2px #FFFFFF;
					// text-stroke: 2px #FFFFFF;
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
				}

				.image {
					width: 330rpx;
					height: 200rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}

				// background: url(/static/sj_dp_tjyy.png) top center no-repeat;

				// background-size: 100% auto;
			}
		}

		.cygn-div {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.jrjg-div {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.jrjg-list {
					width: 300rpx;
					background: #FAFAFA;
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;
					font-size: 28rpx;
					margin-bottom: 30rpx;

					.image {
						width: 300rpx;
						height: 300rpx;
					}

					.title1 {
						padding: 0 16rpx;
						color: #333333;
						margin-top: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

					.title2 {
						padding: 0 16rpx;
						margin: 8rpx 0 16rpx;
						color: #999999;
						font-size: 26rpx;

						.redzi {
							font-size: 32rpx;
						}
					}

					.title3 {
						padding: 0 16rpx;
						color: #999;
						margin-bottom: 16rpx;
						display: flex;
						align-items: center;
						font-size: 26rpx;
					}

					.redzi {
						color: #DF686A;
					}
				}
			}
		}
	}
</style>